<template>
    <div>
        <van-list
                v-if="approvalList.length>0"
                v-model="loading"
                :finished="finished"
                :finished-text="finishedTxt"
                :immediate-check='false'
                offset=20
                @load="goPullup"
                class="vantList"
            >
            <div class="listLayout">
                <div class="wd50 whiteBg mb10" v-for="(item,index) in approvalList" :key="index">
                    <div class="center">
                        <van-image  width='120' height="140"  @click.stop="goShowImg(item.url)" lazy-load fit='cover' :src="item.url"></van-image>
                    </div>
                    <div  @click="goDetail(item.id)">
                        <ul class="color999">
                            <li>主题  <span class="color333">{{item.subject_name}}</span></li>
                            <li>设计师  <span class="color333">{{item.sj_name}}</span></li>
                            <!-- <li>款类  <span class="color333">Y-连衣裙</span></li> -->
                            <li>款号  <span class="color333">{{item.fas_code}}</span></li>
                            <li>采购类型  <span class="color333">{{item.fob_type}}</span></li>
                            <li>供应商名称  <span class="color333">{{item.fob_type_supp_name}}</span></li>
                        </ul>
                    </div>
                </div>
                <!-- <div class="wd50 whiteBg">
                    <div class="center">
                        <van-image width='100%' height="100%" @click.stop="goShowImg" lazy-load fit='cover' src="https://erp.ellassay.com/uploads/m_image/brandClassify/ella.jpg"></van-image>
                    </div>
                    <div  @click="goDetail">
                        <ul class="color999">
                            <li>主题  <span class="color333">basic</span></li>
                            <li>设计师  <span class="color333">刘诗诗</span></li>
                            <li>款类  <span class="color333">Y-连衣裙</span></li>
                            <li>款号  <span class="color333">Y121</span></li>
                            <li>采购类型  <span class="color333">自制</span></li>
                            <li>供应商名称  <span class="color333">XXX服装厂</span></li>
                        </ul>
                    </div>
                </div> -->
            </div>
            
        </van-list>
        <div v-if="approvalList.length==0"><van-empty image="search" description="暂无数据" /></div>
    </div>
</template>
<script>
import { Toast,ImagePreview,Dialog,Empty } from 'vant';
import {GetQueryStr} from '@/common/common'

export default{
    name:'approvalList',
    data(){
        return{
            loading:true,
            finished:false,
            finishedTxt:'没有更多了',
            approvalList:[],
            page:1
        }
    },
    created(){
        let token=GetQueryStr('token')
        if(token&&token!==''){
            localStorage.setItem('token',token)
            
        }
        this.getApprovalList()
    },
    methods:{
       getApprovalList(){
            Toast.loading({
                message: '加载中',
                forbidClick: true,
            })
            this.$apiRequest.getApprovalList({page:this.page}).then(res=>{
                console.log('审批列表',res)
                if(res.code==1){
                    this.loading = false
                    let list=res.data.data
                    
                    if(list.length===0){
                    this.page==1?this.approvalList=[]:''
                    this.page==1?this.finishedTxt='':''
                    this.finished=true
                    return 
                    }
                    if(this.page==1){
                        this.approvalList=list
                        this.finishedTxt=''
                    }else{
                        this.approvalList=this.approvalList.concat(list)
                    }
                        // this.approvalList=res.data.data
                }else{
                    Toast(res.msg)
                }
                Toast.clear()
            })
       },
       goShowImg(url){
            ImagePreview([url])
       },
       goDetail(id){
        this.$router.push({name:'approvalDetail',query:{id:id}})
       },
       goPullup(){
            console.log('上拉啦啦啦啦')
            this.page++
            this.getApprovalList()
       }
    }
}
</script>
<style lang='less' scoped>
.wrapper{
    background-color: #eee;
}
.listLayout{
    // padding: 0.4rem;
    // flex-wrap:wrap;
    width: 90%;
    margin: 0 auto;
    column-count:2;
    -moz-column-count:2; 
    -webkit-column-count:2; 
    // column-gap:0.3rem;
    column-gap: 0.3rem;
    -webkit-column-gap:0.3rem;
    padding-top: 0.4rem;
    ul{
        padding: 0.2rem;
        li{
            font-size: 0.26rem;
        }
    }
    .wd50{
        height: 100%;
        overflow: hidden;
        page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        border-radius: 0.1rem;
    }
}
</style>
